<template>
    <div class="goodsinfo-container">
        
		<!-- 小球 -->
		<transition
		@before-enter="beforeEnter"
		@enter="Enter"
		@after-enter="afterEnter"
		>
		<div class="ball" v-show="ballFlag" ref="ball"></div>
		</transition>

        <!-- 页头 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :lunboList='lunbotuList' :isfull='false'></swiper>
					</div>
				</div>
            </div>
        <!-- 页中 -->
        <div class="mui-card">
				<div class="mui-card-header">{{goodsinfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>
							市场价：<del>￥{{goodsinfo.market_price}}</del>&nbsp;&nbsp; <span class="now_price">销售价:￥{{goodsinfo.sell_price}}</span>
						</p>
						<p>
							 	<span>购买数量：</span>  <span><numbox @getcount="getSelectedCount" :max="goodsinfo.stock_quantity"></numbox></span>
						</p>
						<p>
							<mt-button type="primary" size="small">立即购买</mt-button>
							<mt-button type="danger" size="small" @click="addToShopcar" >添加购物车</mt-button>
						</p>
					</div>
				</div>
			</div>
        <!-- 页尾 -->
        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{goodsinfo.goods_no}}</p>
						<p>库存情况：{{goodsinfo.stock_quantity}}</p>
						<p>上架时间：{{goodsinfo.add_time|dataFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<p>
						<mt-button type='primary' size="large" plain @click="godesc(id)">图文介绍</mt-button>
						<mt-button type='danger' size="large" plain @click="gocomment(id)">商品评论</mt-button>
					</p>
				</div>
			</div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
import swiper from '../subcomponents/swiper.vue'
import numbox from '../subcomponents/goodsinfo_numbox.vue'
export default {
    data(){
		return{
			id:this.$route.params.id,  //将路由参数对象中的id挂载到data
			lunbotuList:[],
			goodsinfo:[],
			ballFlag:false,
			selectedCount:1
		}
	},
	created(){
		this.getLunbotu(),
		this.getinfo()
	},
	methods:{
		getLunbotu(){
			this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/'+this.id).then(result=>{
				if(result.body.status === 0){
					result.body.message.forEach(item=>{
						item.img= item.src
					})
					this.lunbotuList= result.body.message
					// Toast('成功')
				}
			})
		},
		getinfo(){
			this.$http.get('http://www.liulongbin.top:3005/api/goods/getinfo/'+this.id).then(result=>{
				if(result.body.status === 0){
					this.goodsinfo = result.body.message[0]
					// Toast('获取成功')
				}
			})
		},
		godesc(id){
			this.$router.push({ name :'goDesc', params:{id}});
		},
		gocomment(id){
			this.$router.push({ name :'goComment', params:{id}});
		},
		addToShopcar(){
			this.ballFlag= !this.ballFlag;

			var goodsinfo = {id:this.id,count:this.selectedCount,price:this.goodsinfo.sell_price,selected:true}	
			this.$store.commit('addTocar',goodsinfo)
		},
		beforeEnter(el){
			el.style.transform="translate(0,0)"; //刚开始的初始位置

		},
		Enter(el,done){
			el.offsetWidth;
			//获取小球在页面中的位置
			const ballPosition = this.$refs.ball.getBoundingClientRect();
			const badgePosition = document.getElementById('badge').getBoundingClientRect();
			const xDist = badgePosition.left - ballPosition.left;
			const yDist = badgePosition.top - ballPosition.top;

			el.style.transform =`translate(${xDist}px,${yDist}px)`
			el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68) "; 
			done();	
		},
		afterEnter(el){
			this.ballFlag =! this.ballFlag;
		},
		getSelectedCount(count){
			//子组件传过来的count复制到 data中的selectedCount
			this.selectedCount = count;
			console.log('父组件：'+this.selectedCount)
		},
	},
	components:{
		swiper,
		numbox,
	}
}
</script>

<style scoped>
.goodsinfo-container{
    background-color: #eee;
    overflow: hidden;
}
.now_price{
	color: red;
}
.mui-card-footer, .mui-card-header{
	display: block;
}
 button{
	margin:12px 0;
}

.ball{
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color:red;
	position: absolute;
	z-index: 99;
	top:409px;
	right:208px;
	
}
</style>

